@import '~@hi-ui/core-css/lib/index.scss';

$prefix: '#{$component-prefix}-tooltip' !default;

.#{$prefix} {
  $content-color: use-color('gray', 700, 0.8);
  $arrow-color: use-color('gray', 700, 0.8);
  $font-color: use-color-static('white');

  box-sizing: border-box;
  color: $font-color;
  border-color: $content-color;
  background-color: $content-color;
  border-radius: use-border-radius('normal');
  box-shadow: use-shadow('lg');

  // animation
  transition-timing-function: use-motion-bezier('normal');
  transition-duration: use-motion-duration('fast');
  transition-property: opacity, transform;
  // 该变量通过 JS 注入👇🏻
  transform-origin: var(--popper-transform-origin);
  opacity: 0;
  transform: scale(0);
  will-change: transform;

  // 为了保证 arrow 三角形可以正常展示
  position: relative;
  min-width: 36px;
  min-height: 36px;

  &--motion {
    &-enter {
      .#{$prefix} {
        opacity: 0;
        transform: scale(0.8);
      }
    }

    &-enter-active {
      .#{$prefix} {
        opacity: 1;
        transform: scale(1);
      }
    }

    &-enter-done {
      .#{$prefix} {
        opacity: 1;
        transform: scale(1);
      }
    }

    &-exit {
      .#{$prefix} {
        opacity: 1;
        transform: scale(1);
      }
    }

    &-exit-active {
      .#{$prefix} {
        opacity: 0;
        transform: scale(0.8);
      }
    }

    &-exit-done {
      // 即使保留dom，但是需要 hidden 不可点击
      visibility: hidden;

      .#{$prefix} {
        transition-property: none;
        opacity: 0;
        transform: scale(0);
      }
    }
  }

  &__arrow {
    z-index: 1;
    position: relative;

    // TODO: 存在空间双倍占用，相当于 12 px，改写成正方形又会占用自己的区域
    &::before,
    &::after {
      content: '';
      position: absolute;
      width: 0;
      height: 0;
      border-style: solid;
      border-color: transparent;
      border-width: 6px;
    }

    &::after {
      filter: blur(8px);
      z-index: -1;
    }
  }

  &__popper {
    &[data-popper-placement^=top] {
      .#{$prefix}__arrow {
        bottom: -1px;

        &::before {
          left: 0;
          transform: translateX(-6px);
          top: -1px;
          border-top-color: $arrow-color;
        }

        &::after {
          left: 0;
          transform: translateX(-6px);
          top: 1px;
          border-top-color: rgba(0, 0, 0, 0.1);
        }
      }
    }

    &[data-popper-placement^=bottom] {
      .#{$prefix}__arrow {
        top: -1px;

        &::before {
          left: 0;
          transform: translateX(-6px);
          bottom: -1px;
          border-bottom-color: $arrow-color;
        }

        &::after {
          left: 0;
          transform: translateX(-6px);
          bottom: 1px;
          border-bottom-color: rgba(0, 0, 0, 0.1);
        }
      }
    }

    &[data-popper-placement^=left] {
      .#{$prefix}__arrow {
        right: -1px;

        &::before {
          top: 0;
          transform: translateY(-50%);
          left: -1px;
          border-left-color: $arrow-color;
        }

        &::after {
          top: 0;
          transform: translateY(-50%);
          left: 1px;
          border-left-color: rgba(0, 0, 0, 0.1);
        }
      }
    }

    &[data-popper-placement^=right] {
      .#{$prefix}__arrow {
        left: -1px;

        &::before {
          top: 0;
          transform: translateY(-50%);
          right: -1px;
          border-right-color: $arrow-color;
        }

        &::after {
          top: 0;
          transform: translateY(-50%);
          right: 1px;
          border-right-color: rgba(0, 0, 0, 0.1);
        }
      }
    }
  }

  &__content {
    position: relative;
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    color: inherit;
    padding: use-spacing(4) use-spacing(5);
    font-size: use-text-size('normal');
    line-height: use-text-lineheight('sm');
  }
}
